<style>
    #enginren{
        height: 100%;background:#eee;padding-right:5px;
    }
    #enginren #enginren_content{
        width: 100%;
        min-height: 500px;
        font-size: 13px;
        overflow-x: auto;
    }
    #enginren .layui-tree-icon{
        margin-left: 12px;
    }
    #enginren .typeall{
        width: 100%;height:35px;text-align:left;padding-left: 8px;background: #fff;color: #555;
    }
    #enginren .typeall:hover{
        color:#1ca5ff;
    }
    #enginren #enginren_content .lis{
        height: 36px;
        line-height: 36px;
        color: #555;
        overflow: hidden;
        padding-left: 11px;
        cursor: pointer;
    }
    #enginren #enginren_content .lis:hover{
        color:#1ca5ff;
    }
    #enginren #enginren_content .etext{
        margin-left: 10px;
    }
    #enginren .enginren_bac{
        background:#fff;
    }
    #enginren .enginren_div{
        height: 49px;line-height:48px;border-bottom: 1px solid #eee;
    }
    #enginren .enginren_title{
        float: left;font-size: 14px;padding-left: 10px;
    }
    #enginren .enginren_nav{
        float: right;padding-right: 15px;
    }
    #enginren .enginren_nav a{
        font-size: 14px;cursor: pointer;
    }
    #enginren #enginren_name{
        width: calc(100% - 65px) !important;
        margin: 5px 5px 5px 10px;
        float: left;
        border-radius:4px;
    }
    #enginren #enginren_sea{
        float: right;
        margin: 5px 10px 5px 0;
        padding: 0 12px;
        height: 36px;
    }
    #enginren #loading_text{
        font-size: 12px;
        text-align: center;
        color: #c2c2c2;
        height: 40px;
        line-height: 40px;
    }
    #enginren .engin_dao_dian{
        color: #1ca5ff!important;
    }


    #enginrenmin{
        width: 50px!important;
        background:#eee;padding-right:5px;
    }
    #enginrenmin .enginren_bg{
        width: 100%;
        height: 100%;
        background-color: #FFFFFF;
        text-align: center;
    }
    #enginrenmin .enginren_bg .col{
        height: 35px;
        line-height: 35px;
        cursor: pointer;
    }
    #enginrenmin .enginren_title{
        font-size: 14px;
        font-weight: bold;
        letter-spacing: 9px;
        padding-left: 5px;
        color: #555;
    }
    #table-card .enginrenmin_guan{
        width: calc(100% - 65px) !important;
    }
</style>
<div class="dao_ren layui-hide">
    <div class="layui-col-md2" id="enginren">
        <div class="enginren_bac">
            <div class="enginren_div">
                <div class="enginren_title" style="cursor: pointer;" onclick="qie_dao('fen')">证书分类导航</div>
                <div class="enginren_title colorlan" >人员姓名导航</div>
                <div class="enginren_nav">
                    <a id="enginren_left"><i class="layui-icon layui-icon-left"></i></a>
                </div>
            </div>
            <div>
                <input type="text" id="enginren_name" placeholder="人员姓名" class="layui-input" autocomplete="off">
                <button id="enginren_sea" class="laytp-btn" type="button"><i class="layui-icon layui-icon-search"></i></button>
            </div>
            <div>
                <button id="enginren_all" type="button" class="layui-btn layui-btn-sm typeall engin_dao_dian">
                    <i class="layui-icon layui-icon-home"></i>&nbsp;&nbsp;&nbsp;全部
                </button>
            </div>
            <div id="enginren_content">
                <div class="cons"></div>
                <div id="loading_text"></div>
            </div>
        </div>
    </div>
    <div class="layui-col-md2 layui-hide" id="enginrenmin">
        <div class="enginren_bg">
            <div class="col" id="enginren_right"><a><i class="layui-icon layui-icon-right"></i></a></div>
            <div class="enginren_title">人员姓名导航</div>
        </div>
    </div>
</div>


<script>
    var daoPage = 1, daoPagesize = 20, daoFinish = false;
    layui.use(["laytp",'tree','laypage','table','dropdown','form','soulTable'], function () {
        var tree = layui.tree,laypage = layui.laypage, table = layui.table, dropdown = layui.dropdown,
            form = layui.form, soulTable = layui.soulTable;

        getenginrenData();
        $("#enginren #enginren_left").click(function () {
            var cliHeight = document.getElementById('enginren').clientHeight;

            $("#enginren").addClass('layui-hide');
            $("#table-card #table_list").addClass('enginrenmin_guan');

            document.getElementById('enginrenmin').style.height = cliHeight+"px";
            $("#enginrenmin").removeClass('layui-hide');
        });
        $("#enginrenmin #enginren_right").click(function () {
            $("#enginren").removeClass('layui-hide');
            $("#table-card #table_list").removeClass('enginrenmin_guan');
            $("#enginrenmin").addClass('layui-hide');
        });

        $('#enginren #enginren_all').click(function () {
            $(this).addClass('engin_dao_dian');
            $("#enginren_content .cons .lis").removeClass('engin_dao_dian');
            $('.layui-tree-entry').each(function () {
                $(this).find('.layui-tree-txt').removeClass('layui-tree-other');
            });
            $("#personid").val(0)
            searchTableFunc(form, table);
        });

        $('#enginren #enginren_sea').click(function () {
            daoPage = 1;
            $("#enginren_content .cons").html('');
            enginDataLoading();
            getenginrenData()
        });



        function getenginrenData() {
            if(daoFinish){
                return false;
            }
            var enginren_name = $("#enginren_name").val() || '';
            facade.ajax({url: ask_person_dao_list, data: {keyword: enginren_name, page:daoPage, pagesize:daoPagesize}}).done(function(res){
                if (res.code === 2000) {
                    if(res.data.current_page >= res.data.last_page){
                        enginDataFinish();
                    }

                    var str = '';
                    var daodata = res.data.data;
                    for (var key in daodata){
                        str += '<div class="lis" key="'+daodata[key].id+'">';
                        str += '<i class="layui-icon layui-icon-file"></i>';
                        str += '<span class="etext">'+daodata[key].title+'</span>';
                        str += '</div>';
                    }
                    $("#enginren_content .cons").append(str);
                    $("#enginren_content .cons .lis").click(function () {
                        $("#enginren  #enginren_all").removeClass('engin_dao_dian');
                        $("#enginren_content .cons .lis").removeClass('engin_dao_dian');
                        $(this).addClass('engin_dao_dian');


                        var thispersonid = parseInt($(this).attr('key')) || 0;
                        $("#personid").val(thispersonid)
                        searchTableFunc(form, table);
                    });

                    var height = $('.laytp-container').height() - 256 + 'px';
                    $('#enginren_content').css('cssText','max-height:'+height);
                }
            });
        }



        $('#enginren #enginren_content').scroll(function (e) {
            if (isScrollBottom(this)) {
                if(!daoFinish){
                    enginDataLoading();
                    daoPage += 1;
                    getenginrenData();
                }
            }
        });
    })





    function isScrollBottom(obj) {
        if (obj.scrollTop + obj.clientHeight === obj.scrollHeight) {
            return true;
        } else {
            return false;
        }
    }


    function enginDataLoading() {
        daoFinish = false;
        $("#enginren #enginren_content #loading_text").html('数据加载中...');
    }
    function enginDataFinish() {
        daoFinish = true;
        $("#enginren #enginren_content #loading_text").html('数据已全部加载');
    }


</script>
